import Snap from 'snapsvg-cjs'
const changeColorTime = 200
const changePositionTime = 1000

/** 颜色变换动画
 *
 * @param {*} el 变化对象
 * @param {*} color 变换的颜色
 */
export function doColorAnimate(el, color) {
  el.animate({ fill: color }, changeColorTime)
}

/** 位置变换动画
 *
 * @param {*} el 变化的对象
 * @param {*} matrix 变化矩阵
 */
export function doPositionAnimate(el, matrix) {
  el.animate({ transform: matrix }, changePositionTime)
}

/** 获取模式对应的颜色
 *
 * @param {*} mode  模式
 * @returns  颜色字符
 */
export function getModeColor(mode) {
  let color = '#999'
  switch (mode) {
    case 1:
      color = '#67C23A'
      break
    case 2:
      color = '#0ff'
      break
    case 3:
      color = '#409EFF'
      break
    case 4:
      color = '#F56C6C'
      break
    case 5:
      color = '#E6A23C'
      break
    default:
      break
  }
  return color
}

/** 获取设备位置尺寸
 *
 * @param {Elememt} device 设备对象
 * @returns
 */
export function getDeviceAppearance(device) {
  // const margin = 45
  const x = device.node.x.baseVal.value
  const y = device.node.y.baseVal.value
  const width = device.node.width.baseVal.value
  const height = device.node.height.baseVal.value
  let length = 0
  let pos = null
  length = 137
  pos = { x: x + width / 2 - length / 2, y: y + height / 2 - length / 2 }
  return {
    pos,
    size: 137
  }
}
/**
 * 创建SVG   Text
 * @param {*} paper SVG paper
 * @param {*} name text内容
 * @param {*} size 字体大小
 * @param {*} el 在目标元素上显示
 */
export function createSvgText(paper, name, size, el) {
  const t = paper.text(0, 0, name).attr({
    fill: '#fff',
    'font-size': size,
    x: el.node.x.baseVal.value + 5,
    y: el.node.y.baseVal.value + size
  })
  t.insertAfter(el)
}

export function getModeMappingData(value) {
  switch (value) {
    case 1:
      return '自动中'
    case 2:
      return '手动中'
    case 3:
      return '停止中'
    case 4:
      return '异常中'
    case 5:
      return '维护中'
    case 0:
    default:
      return '无数据'
  }
}
/**
 * 获取元素右上角坐标
 * @param {*} el  Element
 * @returns \{x,y}
 */
export function getElementRightTop(el) {
  return {
    x: el.node.x.baseVal.value + el.node.width.baseVal.value,
    y: el.node.y.baseVal.value + 50
  }
}
/**
 * 移除货物
 * @param {*} boxName 货物Id
 */
export function removeGoods(boxName) {
  const box = document.getElementById(boxName)
  if (box !== undefined && box !== null) {
    box.style.display = 'none'
  }
}
/**
 * 处理Mode数据变化
 * @param {Array} devices 设备
 * @param {Array} data 数据
 */
export function handleModeChanged(devices, datas) {
  datas.forEach((data) => {
    const dev = devices.find((item) => item.node.id === data.name)
    const color = data.mode ? '#67C23A' : '#F56C6C'
    doColorAnimate(dev, color)
  })
}
/**
 * 处理Con数据变化
 * @param {Array} devices 设备
 * @param {Array} datas 数据
 * @param {Function} addGoods 添加货物方法
 */
export function handleConChanged(devices, datas, addGoods) {
  datas.forEach((data) => {
    const dev = devices.find((item) => item.node.id === data.name)

    if (dev) {
      const color = getModeColor(data.mode)
      const boxName = data.name + '_box'
      if (data.unitId.length > 0) {
        addGoods(boxName, dev)
      } else {
        removeGoods(boxName)
      }
      doColorAnimate(dev, color)
    }
  })
}
export function handleSrmChanged(devices, datas, addGoods, getTrailPosition) {
  // console.log('handleSrmChanged', data.name)
  datas.forEach((data) => {
    const dev = devices.find((d) => d.node.id === data.name)

    if (dev) {
      const color = getModeColor(data.mode)
      const matrix = getTrailPosition(data.bayNum, data.name) // 获取轨道位置

      const boxName = data.name + '_box'
      const box = getBox(boxName, dev)
      if (data.unitId.length > 0) {
        addGoods(boxName, dev)
      } else {
        removeGoods(boxName)
      }
      doPositionAnimate(dev, matrix)
      doPositionAnimate(box, matrix)
      doColorAnimate(dev, color)
    }
  })
}

/**
 * 获取货物图形
 * @param {*} boxName
 * @param {*} el 设备Element
 * @param {*} group svg组
 * @param {*} pallet 托盘Element
 * @returns box
 */
export function getBox(boxName, el, group, pallet) {
  let box = group.select(`#${boxName}`)
  if (box === undefined || box === null) {
    box = pallet.clone().attr({ id: boxName, display: 'block' })
    const appearance = getDeviceAppearance(el)
    const subbox = box.selectAll('*')
    subbox[0].attr({
      x: appearance.pos.x + 10,
      y: appearance.pos.y + 10,
      width: appearance.size,
      height: appearance.size
    })
    subbox[1].attr({
      x: appearance.pos.x,
      y: appearance.pos.y,
      width: appearance.size,
      height: appearance.size
    })
  }
  return box
}

const pallet = null
const group = null

export async function initSvg() {

}
